<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>

    <script type="text/javascript" src="/erp/js/jquery.2.1.4.js"></script>
    <script type="text/javascript" src="/erp/js/echarts.common.min.js"></script>
    <link rel="stylesheet" href="/erp/chart/style.css" type="text/css"/>
    <script>
        jQuery(function () {

            jQuery("#banner_menu_wrap").children().hover(function () {
                jQuery(this).css("background", "darkblue");
            }, function () {
                jQuery(this).css("background", "none");
            })
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a {
            border: 0;
        }

        body {
            font: 25px Arial, Helvetica, sans-serif, "新宋体";
        }
    </style>
    <script>
        function chart(gid) {
            jQuery.post("/erp/chartCtrl?parm=chart", {gid: gid}, function (data) {
                var indate = [];
                var innum = [];
                var outdate = [];
                var outnum = [];
                var outs = data.outchart;
                var ins = data.inchart;

                for (var i = 0; i < ins.length; i++) {
                    indate.push(ins[i].date);
                    innum.push(ins[i].num);
                }

                for (var i = 0; i < outs.length; i++) {
                    outdate.push(outs[i].date);
                    outnum.push(outs[i].num);
                }

                var ichart = echarts.init(document.getElementById('ichart'));
                var ochart = echarts.init(document.getElementById('ochart'));
                var ioption = {
                    title: {
                        text: '入库柱状图',
                        subtext: '此商品的入库情况'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: indate,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '50px',
                            data: innum
                        }
                    ]
                };

                var ooption = {
                    title: {
                        text: '出库柱状图',
                        subtext: '此商品的出库情况'
                    },
                    color: ['#483d8b'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: outdate,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '50px',
                            data: outnum
                        }
                    ]
                };
                ichart.setOption(ioption);
                ochart.setOption(ooption);
            }, "json");
        }
    </script>
</head>

<body>
<div style="margin:0px;height:100%;width: 100%">
    <div style="text-align:center;float:left;margin:0px;height:100%;width:20%;overflow:auto;">
        <div id="big_banner_wrap">
            <ul id="banner_menu_wrap">
            <c:forEach items="${goodses}" var="gd">
                    <li class="active" onclick="chart(${gd.gid});">
                        <a href="javascript:void(0);">${gd.gname}</a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div style="float:left;margin:0px;height:100%;width:80%;">
        <div id="ichart" style="width: 100%;height:50%;"></div>
        <div id="ochart" style="width: 100%;height:50%"></div>
    </div>
</div>
</body>
</html>
